Телефонная кнопка <style> .button26 { position: relative; display: inline-block; border-radius: 100px; outline: none; box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset, 0 1px 1px rgba(255,255,255,.2); background: #8a7b78 linear-gradient(#8a7b78, #cdcdcd); } .button26 span { position: relative; display: block; width: 50px; height: 100px; border: solid transparent; border-width: 0 0 0 50px; border-radius: 100px; outline: none; overflow: hidden; } .button26 span:before { content: ""; position: absolute; left: -50px; height: 100px; border-right: 50px solid transparent; border-left: 50px solid #bfddf5; border-radius: 100px; } .button26:after { content: "\260e"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 80px; height: 80px; line-height: 80px; font-size: 300%; font-weight: 700; text-align: center; text-shadow: #2e7ebd 0 1px 2px; color: #fff; margin: auto; border-radius: 100px; background: #75a7cd linear-gradient(#75a7cd, #5084a8); box-shadow: 0 2px 2px rgba(255,255,255,.5) inset, 0 -2px 2px rgba(0,0,0,.3) inset, 0 0 2px 2px rgba(0,0,0,.3); } .button26:focus span { -webkit-animation: background1 10s linear forwards; animation: background1 10s linear forwards; } .button26:focus span:before { -webkit-animation: rotate1 10s linear forwards; animation: rotate1 10s linear forwards; } .button26:focus:after { background: #5390b8 linear-gradient(#5390b8, #6ba9d4); } @-webkit-keyframes background1 { 49.999% {border-width: 0 0 0 50px; border-color: transparent;} 50%, 100% {border-width: 0 50px 0 0; border-color: #bfddf5;} } @-webkit-keyframes rotate1 { 49.999% {left: -50px;} 50% {left: 0px;} 100% {-webkit-transform: rotate(360deg); left: 0px;} } @keyframes background1 { 49.999% {border-width: 0 0 0 50px; border-color: transparent;} 50%, 100% {border-width: 0 50px 0 0; border-color: #bfddf5;} } @keyframes rotate1 { 49.999% {left: -50px;} 50% {left: 0px;} 100% {transform: rotate(360deg); left: 0px;} } </style> <a href="#" class="button26" tabindex="0"><span></span></a>